<template>
  <a-spin :spinning="confirmLoading">
    <!-- <j-form-container :disabled="formDisabled"> -->
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        class="j-table-force-nowrap table-custom"
        :pagination="false"
        :rowClassName="setRowClass">
        <!-- 产品图片 -->
        <template slot="productImageSlot" slot-scope="text, record">
          <div>
            <p>
              <span v-if="!record.productImage" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(record.productImage)" style="width:80px;height: 80px;border-radius: 4px;object-fit: cover;cursor: pointer;" @click="handleImg(record.productImage)"/>
            </p>            
            <a-tag color="red" size="mini" v-if="record.violationTag && record.violationTag.level">{{ record.violationTag && record.violationTag.level }}星</a-tag>
            <p style="color: #1890FF; cursor: pointer; margin-top: 8px;" @click="handleSearchImg(record)">查重搜图</p>
          </div>
        </template>
        <!-- SKU/SPU -->
        <template slot="skuCodeSlot" slot-scope="text, record">
          <div>
            <!-- 多属性SKU,单属性SPU -->
            <p style="font-weight: 700;">{{ record.productType === '2' ? record.spuCode : record.skuCode}}</p>
            <!-- type 违规标签 1  注意标签 2 -->
            <p v-for="(item, index) in record.tagList" :key="index">
              <a-tag color="green" v-if="item.type === 2">{{ item.name }}</a-tag>
            </p>
            <p>
              <a-tag color="red" v-if="record.violationTag && record.violationTag.tagName">{{ record.violationTag && record.violationTag.tagName }}</a-tag>
            </p>
            <p>
              <a-tag color="#f5222d" v-if="record.shelfStatus === '2'">下架</a-tag>
            </p>
            <p>金义仓</p>
            <p :title="`开发人：${record.createBy}`">{{ record.createBy }}</p>
            <p v-if="record.supplier && record.supplier.supplier" :title="`采购人：${record.supplier.supplier.buyer}`">{{ record.supplier.supplier.buyer }}</p>
            <p :title="`审核人：${record.auditBy}`">{{ record.auditBy }}</p>
            <p>
              <a-tag color="#1890FF">{{ record.productStatus_dictText }}</a-tag>
              <a-tag color="#fdaa00" v-if="record.productType === '2'">SPU</a-tag>
              <a-tag color="#fdaa00" v-if="record.productType === '1'">SKU</a-tag>
            </p>
            <p>整款月销：{{ record.orderCount }}</p>
          </div>
        </template>
        <!-- 产品信息 -->
        <template slot="productTypeSlot" slot-scope="text, record">
          <div class="product-info">
            <p style="font-weight: 700; font-size: 14px;">{{ record.title }}</p>
            <p>产品类目：{{ record.categoryFullName }}</p>
            <p>
              <span>海关编码：</span>
              <span style="margin-left: 8px;">版型编码：{{ record.patternCode }}</span>
            </p>
            <p>
              <span>产品中文名称：{{ record.name }}</span>
              <span style="margin-left: 8px;">供应商货号：{{ record.supplierItemNum }}</span>
              <span style="margin-left: 8px;">报关中文名称：{{ record.customs && record.customs.nameCn }}</span>
              <span style="margin-left: 8px;">报关英文名称：{{ record.customs && record.customs.nameEn }}</span>
              <!-- <span style="margin-left: 8px;">申报中文名称：</span>
              <span style="margin-left: 8px;">申报英文名称：</span> -->
              <span style="margin-left: 8px;">报关价值：</span>
              <span style="margin-left: 8px;">重量(g)：{{ record.weight }}</span>
            </p>
            <p>
              <span>颜色：{{ record.colorDesc }}</span>
              <span style="margin-left: 8px;">尺寸：{{ record.size }}</span>
              <span style="margin-left: 8px;">包含：{{ record.includedItem }}</span>
              <span style="margin-left: 8px;">耗材：{{ record.customs && record.customs.materialCn }}</span>
              <span style="margin-left: 8px;">电池配置：{{ record.batteryConfig_dictText }}</span>
              <span style="margin-left: 8px;">保质期天数：</span>
              <span style="margin-left: 8px;">保质期剩余天数：</span>
              <span style="margin-left: 8px;">仓库加工费：</span>
              <span style="margin-left: 8px;">重量(g)：{{ record.weight }}</span>
              <span style="margin-left: 8px;">抛重(g)：{{ record.customs && record.customs.volumetricWeight }}</span>
              <span style="margin-left: 8px;">抛重比：{{ record.customs && record.customs.volumetricWeightRatio }}</span>
              <span style="margin-left: 8px;">长(cm)：{{ record.customs && record.customs.length }}</span>
              <span style="margin-left: 8px;">宽(cm): {{ record.customs && record.customs.width }}</span>
              <span style="margin-left: 8px;">高(cm)：{{ record.customs && record.customs.height }}</span>
              <span style="margin-left: 8px;">来料包装：{{ record.incomingPackage_dictText }}</span>
              <span style="margin-left: 8px;">出货包装：{{ record.protectPackage_dictText }}</span>
              <span style="margin-left: 8px;">英文材质：{{ record.customs && record.customs.materialEn }}</span>
              <span style="margin-left: 8px;">中文材质：{{ record.customs && record.customs.materialCn }}</span>
              <span style="margin-left: 8px;">面料克重：</span>
            </p>        
            <p style="color: red;">刊登次数：{{ record.exportCount }}</p>
            <p>
              <span>库存：</span>
              <span style="margin-left: 8px;">剩余库存：</span>
              <span style="margin-left: 8px;">创建时间：{{ record.createTime }}</span>
              <span style="margin-left: 8px;">SPU：{{ record.spuCode }}</span>
            </p>
            <p>产品来源：{{ record.source_dictText }}</p>
            <p style="color: red;">参考链接：{{ record.referenceLink }}</p>
            <p style="color: red;">备注：{{ record.remark }}</p>
            <p style="color: red;">违规原因：{{ record.violationTag && record.violationTag.reason }}</p>
            <p><span>所有站点定价：</span><span style="margin-left: 8px;">销售价：</span></p>
          </div>
        </template>
      </a-table>
      <div class="preview-content">
        <h1 style="text-align: center;">{{ model.title }}</h1>
        <template v-if="model.description">
          <h2>Features</h2>
          <ul style="font-size: 18px;">
            <li>{{ model.description && model.description.point1 || ''}}</li>
            <li>{{ model.description && model.description.point2 || ''}}</li>
            <li>{{ model.description && model.description.point3 || ''}}</li>
            <li>{{ model.description && model.description.point4 || ''}}</li>
            <li>{{ model.description && model.description.point5 || ''}}</li>
          </ul>
          <h2>Puoduct Description</h2>
          <div style="padding-left: 40px; font-size: 18px;">{{ model.description && model.description.description || '' }}</div>
        </template>
        <a-table
          v-if="table.dataSource && table.dataSource.length"
          style="margin-top: 20px;"
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="table.columns"
          :dataSource="table.dataSource"
          :pagination="false"
          class="j-table-force-nowrap">
        </a-table>
        <div style="display: flex; flex-direction: column; align-items: center; margin-top: 30px;">
          <img :src="item" v-for="(item, index) in imageList" :key="index" style="width: 440px;height: 440px; object-fit: cover; margin-bottom: 10px; border-radius: 4px;">
        </div>
      </div>
    <!-- </j-form-container> -->
  </a-spin>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  export default {
    name: 'ProductLibrarySkuPreviewForm',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        disableMixinCreated: true,
        imageList: [],
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {},
        dataSource: [],
        // 表头
        columns: [
          {
            title:'产品图片',
            align:"center",
            dataIndex: 'productImage',
            scopedSlots: { customRender: 'productImageSlot' }
          },
          {
            title:'SKU/SPU',
            align:"center",
            dataIndex: 'skuCode',
            scopedSlots: { customRender: 'skuCodeSlot' }
          },
          {
            title:'产品信息',
            align:"center",
            dataIndex: 'productType',
            width: 500,
            scopedSlots: { customRender: 'productTypeSlot' }
          },
        ],
        table: {
          dataSource: [],
          columns: []
        },
        url: {
          add: "/hzkj-product/product/productLibrary/sku/add",
          edit: "/hzkj-product/product/productLibrary/sku/edit",
          queryById: "/hzkj-product/product/productLibrary/sku/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.dataSource = [this.model];
        this.visible = true;
        if(this.model.id){
          this.queryById();
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      setRowClass(record) {
        // 产品检查工具检测后，违规，背景F59A23
        if(record.customForbiddenWord){
          return "custom-forbiddenWord"
        }
        // 列表产品背景，若为下架产品背景为浅红色EC808D，若为SPU背景为浅黄色FACD91，SKU背景为白色
        if(record.shelfStatus === '2') {
          return "custom-rowClass";
        } else if(record.productType != '1') {
          return "custom-rowClass_";
        }
      },
      queryById(){
        getAction(this.url.queryById, { id: this.model.id }).then((res) => {
          if(res.success){
            if(res.result && res.result.sizeTable){
              // 尺码表
              let tableHeader = res.result.sizeTable.tableHeader ? JSON.parse(res.result.sizeTable.tableHeader) : [];
              let tableData = res.result.sizeTable.tableData ? JSON.parse(res.result.sizeTable.tableData) : [];

              // 去除空数据
              let keyList = Object.keys(tableData && tableData[0] || {});
              let emptyList = [];
              keyList.forEach(item => {
                let flag = tableData.some(cur => {
                  return cur[item] ? true : false;
                })
                if(!flag){
                  emptyList.push(item);
                }
              })
              tableHeader = tableHeader.filter(item => emptyList.indexOf(item.index) === -1);
              
              this.table.columns = tableHeader.map(item => {
                return {
                  title: item.title,
                  align:"center",
                  dataIndex: item.index
                }
              })
              this.table.dataSource = tableData;
            }
            // 图片
            let imageList = res.result && res.result.imageList && res.result.imageList[0] || {};
            let imgKeyList = ['effectImageList', 'whiteBackgroundImageList', 'sizeImageList', 'otherImageList'];
            imgKeyList.forEach(item => {
              imageList[item].forEach(cur => {
                let curImageUrl = cur.imageUrl ? cur.imageUrl.split(',') : [];
                this.imageList = [...this.imageList, ...curImageUrl];
              })
            })
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      handleSearchImg(record){
        let productStatus = '';
        if(record.productStatus === '7'){
          productStatus = '1';
        }
        if(record.shelfStatus === '2'){
          productStatus = '2';
        }
        this.$router.push({
          path:'/productLibrary/ProductLibraryImgList',
          query:{ params: encodeURIComponent(JSON.stringify({
            imageUrl: record.productImage,
            categoryId: record.categoryId,
            productStatus
          })) }
        })   
      },
      handleImg(text){
        if(text){
          this.$viewerApi({images: [text]});
        }
      },
    }
  }
</script>

<style>
.custom-rowClass{
  background-color: #F8D2D7;
}
.custom-rowClass_{
  background-color: #FACD91;
}
.custom-forbiddenWord{
  background-color: #F59A23;
}
</style>
<style scoped lang="less">
  /deep/.ant-form-item-children{
    display: flex;
    align-items: center;
  }
  .table-custom{
    /deep/.ant-table-scroll .ant-table-tbody{
      td:not(:first-child){
        text-align: left !important;
        vertical-align: top;
      }
    }
  }
  .product-info{
    width: 100%;
    p{
      white-space: normal;
    }
  }
</style>